<template>
  <div class="app-container">
    <search @seach="seach" :searchtype="1"></search>
    <div class="table-box">
      <a class="exportdocument" href="/api/v1/tracker/exportTrackerForms?export=1"><i class="el-icon-document"></i>导出报表</a>
      <Tables :data="list" :listLoading="listLoading" :tableTitle="tableTitle"  v-on:opendetails="opendetails"></Tables>
      <Pagations :totalCount="totalCount" @changePage="changePage"></Pagations>
    </div>
    <DeviceDetails
      :showdetails.sync="showdetails"
      :devicerow="devicerow"
      :driverow="driverow"
      :overspeedrow="overspeedrow"
      :driving="driving"
      :overspeed="overspeed"
      :warning="warning"
      :ChangeRecord="ChangeRecord"
      :loading="loading"
      v-on:changeModalPage="changeModalPage"
    ></DeviceDetails>
  </div>
</template>

<script>
  import { queryTrackerForm } from '@/api/list'
  import search from  './search'
  import Pagations from '@/components/pagations'
  import pagationdata from '@/mixins/pagations'
  import deviceDetails from '@/mixins/devicedetails'
  import DeviceDetails from './devicedetails'
  import Tables from  '@/components/table'
  import Option from '@/components/table/option'

  export default {
    mixins: [pagationdata,deviceDetails],
    name:'DeviceTable',
    data() {
      return {
        tableTitle:[{
          title:'设备编号',
          prop:'trackerId',
          width:'180px'
        },{
          title:'IMEI号',
          prop:'imei',
          width:'200px'
          }, {
          title:'设备状态',
          prop:'signalStatusStr',
          width:'180px'
          },{
          title:'报警状态',
          prop:'statusStr',
          width:'180px'
        },{
          title:'绑定时间',
          prop:'bindTimeStr',
          width:'200px'
        }, {
          title:'手机号',
          prop:'telephone',
          width:'180px'
        },{
          title:'使用人',
          prop:'userName'
        },{
          title:'通信卡号',
          prop:'sim',
          width:'230px'
        },{
            prop: "",
            title: "操作",
            width:'120px',
            render: (h, param) => {
              const optionData = {
                title: "操作",
                items: [
                  { label: "设备详情", func: { func: "opendetails", uuid: param.row },id:1 }]
              };

              return h(Option, {
                props: { optionData: optionData },
                on: { opendetails: this.opendetails}
              });
            }
          }
        ]
      }
    },
    components:{
      search,
      Pagations,
      DeviceDetails,
      Tables
    },
    created() {
      this.fetchData(this.listQuery)
    },
    methods: {
      seach(data){
        this.formline=data
        this.fetchData(data)
      },
      changePage: function(val) {
        this.fetchData({
          pageSize: 10,
          currentPage: val,
          ...this.formline
        })
      },
      fetchData(data) {
        this.listLoading = true
        queryTrackerForm(data).then(response => {
          if(response && response.body){
            this.list = response.body.trackerList
            this.totalCount = response.body.count
          }else {
            this.list = []
            this.totalCount = 0
          }
          this.listLoading = false
        })
      },
      opendetails(row){
        this.showdetails=true
        this.trakcerId=row.trackerId
        this.trakerDetail(row.trackerId,this.drivingquery)
      }
    }
  }
</script>
